<template>
    <div class="header-container">
        <div class="header-left">
            <div class="header-icon" @click="toggleCollapse">
                <el-icon v-if="store.state.menu.isCollapse">
                    <Expand />
                </el-icon>
                <el-icon v-else>
                    <Fold />
                </el-icon>
            </div>
        </div>
        <div class="header-right">
            <el-dropdown>
                <div class="el-dropdown-link">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <p class="user-name">admin</p>
                </div>

                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { Fold, Expand } from '@element-plus/icons-vue'

const store = useStore()

const toggleCollapse = () => {
  store.commit('menu/toggleSideBar')
}
</script>

<style scoped>
.header-container {
    height: 44px;
    /* 调整为图标高度 */
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    /* 移除多余的padding */
}

.header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.header-icon .el-icon {
    font-size: 20px;
    color: #303133;
}

.header-icon:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
}

:deep(.el-icon) {
    width: 1em;
    height: 1em;
    line-height: 1em;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.user-name {
    margin-left: 8px;
    font-size: 14px;
}
</style>